import React, { useState, useEffect } from "react";
import { AddO, UserCircleO, Photograph } from "@react-vant/icons";
import { Cell, Dialog, Button, Input, Form, Picker, Toast } from "react-vant";
import axios from "../axios/index";
import { useNavigate } from "react-router-dom";

type Props = {};

const Np = (props: Props) => {
  const navigate = useNavigate();
  const [username, setUsername] = useState(localStorage.getItem("username"));
  const [form] = Form.useForm();
  //添加
  const onFinish = (values: any) => {
    console.log(values);
    axios
      .post("http://localhost:8080/addcklblist", {
        type: values.cklx,
        name: values.username,
        zjlx: values.zjlx,
        code: values.usersjhm,
        tel: values.userhm,
        status: false,
      })
      .then((res) => {
        Toast.success("添加成功");
        navigate("/passenger");
      });
  };
  // const sm=()=>{
  //   axios.post('https://aip.baidubce.com/oauth/2.0/token',{
  //     grant_type:"client_credentials",
  //     client_id:"u8cbDZKc9iD9r1RdWblFcwki",
  //     client_secret:"HNjN1YmYd59p57Nvr4wVoKc140HKkdvV"
  //   }).then((res)=>{

  //   })
  // }
  return (
    <div className="nps">
      <header>
        <div>新增乘客</div>
        <div>
          <p>
            <UserCircleO style={{ width: "25px", height: "25px" }} />{" "}
          </p>
          <p>{username}</p>
          <p> 切换账号》》</p>
        </div>
      </header>
      <main>
        <div className="zj">
          <Photograph />
          扫描证件添加
        </div>
        <div className="xz">
          <Form
            form={form}
            onFinish={onFinish}
            footer={
              <div style={{ margin: "16px 16px 0" }}>
                <Button
                  round
                  nativeType="submit"
                  type="primary"
                  block
                  className="addbtn"
                >
                  提交
                </Button>
              </div>
            }
          >
            <Form.Item
              name="cklx"
              initialValue="成人票"
              label="乘客类型"
              trigger="onConfirm"
              onClick={(_, action: any) => {
                action.current?.open();
              }}
            >
              <Picker popup columns={["成人票", "儿童票", "残疾票", "军人票"]}>
                {(val) => val || "请选择从乘客类型"}
              </Picker>
            </Form.Item>
            <Form.Item
              tooltip={{
                message:
                  "A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.",
              }}
              rules={[{ required: true, message: "请填写用户名" }]}
              name="username"
              label="姓名"
            >
              <Input placeholder="与乘客姓名保持一致" />
            </Form.Item>

            <Form.Item
              name="zjlx"
              initialValue="身份证"
              label="证件类型"
              trigger="onConfirm"
              onClick={(_, action: any) => {
                action.current?.open();
              }}
            >
              <Picker popup columns={["身份证", "外籍证"]}>
                {(val) => val || "请选择证件类型"}
              </Picker>
            </Form.Item>
            <Form.Item
              tooltip={{
                message:
                  "A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.",
              }}
              rules={[{ required: true, message: "请填写用户名" }]}
              name="usersjhm"
              label="证件号码"
            >
              <Input placeholder="与乘客号码保持一致" />
            </Form.Item>
            <Form.Item
              tooltip={{
                message:
                  "A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.",
              }}
              rules={[{ required: true, message: "请填写用户名" }]}
              name="userhm"
              label="手机号码"
            >
              <Input placeholder="请准确填写手机号" />
            </Form.Item>
          </Form>
          <div className="zt">
            为配合疫情防控工作,需要提供每名乘客的<span>本人手机号</span>
            老人或手机号的乘客,可填写亲友手机号
          </div>
        </div>
        <div className="zt_bottom">本次购票服务由八维购票提供</div>
      </main>
      <footer></footer>
    </div>
  );
};

export default Np;
